<template>
  <div class="article-list-wrapper">
    <ul class="articles">
      <li v-for="(article, idx) in articles" :key="idx">
        <checking-article-card
          :article="article"
          class="article-card"
        ></checking-article-card>
      </li>
    </ul>
    <loading-card class="loading-card" ref="loading"></loading-card>
  </div>
</template>

<script lang="ts" setup>
import CheckingArticleCard from './BaseCom/CheckingArticleCard.vue'
import LoadingCard from '@c/utils/LoadingCard2.vue'
import { onMounted } from 'vue'

const props = defineProps<{
  articles: App.Article[]
}>()

onMounted(() => {})

// TODO: Scrolload
// export default {
//   mounted() {
//     this.$scrollLoad({
//       loadingComponent: this.$refs.loading.$el,
//       callback: (entries) => {
//         let entry = entries[0]
//         if (entry.isIntersecting) {
//           this.$emit('fetchArticleAbstracts')
//         }
//       },
//     })
//   },
// }
</script>

<style scoped lang="less">
@w: var(--articleListWidth);

.article-list-wrapper {
  width: @w;
  background-color: white;
  border-radius: 3px;

  .category {
    --itemListHeight: 50px;
    --itemListWidth: calc(@w * 0.6);
    --itemNum: 3;
  }

  .articles > li {
    border-bottom: 1px solid var(--light);

    .article-card {
      --articleCardWidth: 100%;
      --articleCardHeight: 150px;
    }
  }

  .loading-card {
    --loadingCardWidth: @w;
    --loadingCardHeight: 200px;
  }
}
</style>
